<template>
  <!-- 评论区 -->
  <div class="com-discuss">
    <div class="discuss-nav">
      <p class="discuss-nav-1">评论</p>
    </div>
    <!-- 用户评论 -->
    <ul>
      <li
        class="discuss-user clearfix"
        v-for="(el, i) in newHot"
        v-bind:key="i"
      >
        <div class="user-pic">
          <img :src="`${el.avatarUrl}`" alt="" />
        </div>
        <div class="user-content clearfix">
          <p>{{ el.nick }}</p>
          <div class="cont-data clearfix">
            <span class="data">{{ el.startTime }}</span>
            <div class="data-right">
              <span class="num">{{ el.upCount }}</span>
              <i class="iconfont icon-dianzan"></i>
            </div>
          </div>
          <div class="cont-txt">
            <p>
              {{ el.content }}
            </p>
          </div>
        </div>
      </li>
    </ul>
    <!-- 没有更多啦··· -->
    <p class="notxt">没有更多啦···</p>
    <!-- 底部发表评论 -->
    <div class="com-answer">
      <input type="text" v-model="v1"  placeholder="写评论。。。" />
      <span @click="goPublish">发表</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "comment",
  props: ["hotcomment"],
  data() {
    return {
      newHot: [], //渲染的数据
      trimData: [], //修改后的数据
      tempData: [],
      timer: [], //转换时间
      v1: "", //获取评论内容
      userName: "muYun",
      userImg:
        "https://img2.baidu.com/it/u=444895859,3024843333&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
    };
  },
  // watch: {
  //   trimData(value) {
  //     console.log("发表的评论---", value);
  //     this.tempData = Object.assign(this.trimData, this.tempData);
  //     console.log(this.tempData);
  //     // this.hotcomment = { ...this.trimData, ...this.hotcomment };
  //     // console.log(this.hotcomment);
  //   },
  // },
  methods: {
    // 提取时间戳
    checkData(k) {
      this.newHot = [];
      let obj = k;
      for (let i = 0; i < k.length; i++) {
        obj[i].startTime = this.toData(k[i].time);
      }
      let aaa = obj.sort((a, b) => {
        return b.time - a.time;
      });
      // console.log("排序-----", aaa);
      this.newHot = aaa;
      // console.log(obj);
    },
    // 发表
    goPublish() {
      // 用户头像 avatarUrl
      // 用户昵称 nick
      // 时间戳   time
      // 内容   content
      // 点赞  upCount
      let myTxt = {};
      myTxt.avatarUrl = this.userImg;
      myTxt.nick = this.userName;
      myTxt.startTime = new Date().getTime();
      myTxt.time = new Date().getTime();
      myTxt.upCount = 0;
      myTxt.content = this.v1;
      console.log(myTxt);
      // 评论数据
      this.trimData.push(myTxt);
      // this.trimData = this.trimData.reverse();
      console.log(this.trimData);
      // 拼接
      this.tempData = this.trimData.concat(this.hotcomment);

      // 重新赋值
      this.checkData(this.tempData);
      this.v1 = ""
    },
    // 把时间戳转换为正常时间
    toData(k) {
      let toTime = new Date(k);
      let y = toTime.getFullYear();
      let M = toTime.getMonth() + 1;
      let d = toTime.getDate();
      let h = toTime.getHours();
      let m = toTime.getMinutes();
      // 补零
      M = this.addZero(M);
      d = this.addZero(d);
      h = this.addZero(h);
      m = this.addZero(m);
      return y + "-" + M + "-" + d + " " + h + ":" + m;
    },
    // 补零
    addZero(n) {
      if (n < 10) {
        return (n = "0" + n);
      }
      return n;
    },
  },
  mounted() {
    this.tempData = this.hotcomment;
    this.checkData(this.hotcomment);
    //有点小问题
    // this.goPublish();
  },
};
</script>

<style lang="scss" scoped>
//评论区
.com-discuss {
  //   background: rgb(255, 255, 255);
  margin-bottom: 10px;
  .discuss-nav {
    width: 100%;
    padding: 10px 0 4px 0;
    //  border-bottom: 1px solid rgb(245, 245, 245);
    .discuss-nav-1 {
      display: inline-block;
      margin-left: 15px;
      font-size: 16px;
      padding: 10px 0;
      border-bottom: 3px solid skyblue;
    }
  }
  // 清除浮动
  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }
  // 用户评论
  .discuss-user {
    // display: flex;
    border-bottom: 1px solid rgb(157, 157, 157);
    width: 92%;
    margin: 0 auto;
    padding-top: 12px;
    .user-pic {
      float: left;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    }
    .user-content {
      float: left;
      width: 85%;
      margin-left: 7px;
      padding-bottom: 5px;
      // border-bottom: 1px solid rgb(245, 245, 245);
      p {
        font-size: 16px;
        margin-bottom: 6px;
      }
      .cont-data {
        font-size: 12px;
        height: 16px;
        line-height: 16px;
        color: #ccc;
        margin-bottom: 12px;
        .data {
          color: #ccc;
        }
        .data-right {
          // display: inline-block;
          float: right;
          .num {
          }
          i {
            // font-size: 20px;
          }
        }
      }
      .cont-txt {
        p {
          font-size: 16px;
          letter-spacing: 1.2px;
          line-height: 1.5;
          // 多余的变成省略号
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
    }
  }
  .notxt {
    width: 100%;
    text-align: center;
    margin: 30px auto;
    font-size: 16px;
    color: rgb(147, 147, 147);
  }
}
// 我发表评论
.com-answer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 54px;
  background: #fff;
  //   line-height: 50px;
  position: fixed;
  left: 0;
  bottom: 0;
  input {
    height: 36px;
    width: 270px;
    font-size: 16px;
    background: #f6f6f6;
    margin-left: 10px;
    vertical-align: middle;
    font-weight: 300;
    color: #b2b2b2;
    padding: 0 10px;
    box-shadow: none;
    /*聚焦input的蓝色边框*/
    outline: none;
    /*textarea 禁止拖拽*/
    resize: none;
    /*去除边框*/
    border: none;
    //   &:-webkit-input-placeholder{
    //      color: #7ab4ff !important;
    //   }
    border-radius: 5px;
    &:focus {
      // border: 0;
      border-color: rgb(255, 255, 255);
    }
  }
  span {
    font-size: 16px;
    padding: 0 18px;
    font-weight: 400;
  }
}
</style>